<template>
    <div id="newsCensusList"  class="pt-70">
        <header>
            <div class="P_date">
                <span>时间</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form" prop="">

                        <el-form-item label="选择小程序">
                            <el-select v-model="selectedOptions" placeholder="选择小程序" @change="handleChange">
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择分类">
                            <el-select v-model="selectedOption" placeholder="请选择分类" @change="handleChange1">
                                <el-option label='全部分类' value='' >全部分类</el-option>
                                <el-option :label=item.name :value=item.id v-for="(item,index) in option" :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="文章标题">
                            <el-input v-model="searchData" placeholder="根据文章标题进行搜索"></el-input>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe show-overflow-tooltip>
                <el-table-column prop="appname" label="小程序" align="center"></el-table-column>
                <el-table-column prop="name" label="分类" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.title}}</p>
                            <p slot="reference">{{scope.row.title}}</p>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="opentime" label="打开次数" align="center"></el-table-column>
                <el-table-column prop="sharetime" label="分享次数" align="center"></el-table-column>
                <el-table-column prop="collectionNum" label="收藏次数" align="center"></el-table-column>
                <el-table-column prop="thumbsUp" label="点赞个数" align="center"></el-table-column>
                <el-table-column prop="createtime" label="日期" align="center"></el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>
<script>
import Vue from 'vue';
import newsListModify  from '../modify/newsListModify';
import newsListAdd  from '../add/newsListAdd';
import gDate from '../G_Date/gdate';

import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js';
export default {
        components:{
            gDate
        },
        data(){
            return {
                selectedOption:'',//选择分类
                selectedOptions:'',//选择小程序
                selectedOptionID:'',//分类ID
                selectedOptionsID:'',//小程序ID
                options:[],
                option:[],
                pageSize:2,
                searchData: '',//搜索内容
                total:0,//默认数据总数
                currentPage:1,//默认开始页面
                tableData: []
            }
        },
        methods:{
            faithDate:function(e){//时间组件
                this.userDate = e;
            }
        },
        methods:{
            handleChange:function(e){//change小程序下拉
            
                this.$axios.getAddressJson('/information/getType',{appid:e})
                .then((res)=>{
                    this.selectedOptionsID = e;
                    this.option = res.data.data;
                    this.selectedOption = this.option[0].name;
                    this.selectedOption = this.option[0].id;
                })
            },
            handleChange1(e){ 
                this.selectedOptionID = e;
            },//选择分类
            faithDate:function(e){//时间组件
                this.userDate = e;
            },
            handleCurrentChange:function(e){//点击分页
                this.currentPage = e
                this.CurrData()
            },
            search:function(){//搜索
                //  this.$loading()
                this.currentPage = 1
                // console.log(this.searchData)
                this.CurrData()
            },
            CurrData:function(){//分页
            
                let data = {
                    startTime:this.userDate?this.userDate[0]:'',
                    endTime:this.userDate?this.userDate[1]:'',
                    page:this.currentPage,
                    title:this.searchData,
                    tpid:this.selectedOptionID?this.selectedOptionID:'',
                    appid:this.selectedOptionsID?this.selectedOptionsID:''
                }

                DataList(this,data,'/information/informationCensusList')
            }
        },
        mounted:function(){
            this.CurrData();
            getChannel(this);
        }
    }
</script>
